<script>
import ModuleCard from "../../components/business/module-card/index.vue";
import UForm from "../../uni_modules/uview-ui/components/u-form/u-form.vue";
import UInput from "../../uni_modules/uview-ui/components/u--input/u--input.vue";
import UFormItem from "../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import UCode from "../../uni_modules/uview-ui/components/u-code/u-code.vue";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
export default {
  name: "index",
  components: {UButton, UCode, UFormItem, UInput, UForm, ModuleCard},
  data() {
    return {
      formData: {
        phone: "",
        password: "",
        code: "",
        agin: "",
      },
      rules: {
        field: [
          {required: true, message: "请输入手机号码", trigger: "blur"},
          {min: 11, max: 11, message: "请输入正确的手机号码", trigger: "blur"},
        ],
      },
    };
  },
}
</script>

<template>
  <view>
    <u--form
        labelPosition="left"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
        :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
    >
      <module-card>
        <u-form-item
            label="手机号码"
            prop="formData.phone"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.idCode"
              border="none"
              type="number"
              placeholder="请输入手机号码"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="验证码"
            prop="formData.idCode"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.code"
              border="none"
              placeholder="请输入验证码"
          >
          </u--input>
          <template slot="right">
            <u-button color="#dab386" text="获取验证码" class="code" size="small" />
          </template>
        </u-form-item>
        <u-form-item
            label="新密码"
            prop="formData.idCode"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.password"
              border="none"
              password
              placeholder="请输入密码"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="确认密码"
            prop="formData.idCode"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.agin"
              border="none"
              password
              placeholder="请再次输入密码"
          ></u--input>
        </u-form-item>
      </module-card>
    </u--form>

    <view class="footer">
      <u-button
          type="primary"
          class="footer-btn"
          color="#dab386"
      >确认修改</u-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.code{
  color: #1396db;
  font-size: 14px;
  padding: 0 10px;
  border-left: 1px solid #1396db;
}

//吸底按钮
.footer{
  width: 100%;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0px;
  padding: 20px;
}
</style>
